<template>
  <p>
    <button @click="add()" class="btn btn-white btn-default btn-round">
      <i class="ace-icon fa glyphicon-plus"></i>
      新增
    </button>
    <button @click="list()" class="btn btn-white btn-default btn-round">
      <i class="ace-icon fa fa-refresh"></i>
      刷新
    </button>
  </p>
  <Pagination ref="pagination" :list="list" v-bind:itemCount="8"></Pagination>
  <div class="row">
    <div v-for="teacher in teachers" class="col-md-3">
      <div>
          <span class="profile-picture">
            <img v-show="!teacher.image" class="editable img-responsive editable-click editable-empty" src="/static/image/讲师头像/头像1.jpg" v-bind:title="teacher.intro"/>
            <img v-show="teacher.image" class="editable img-responsive editable-click editable-empty" v-bind:src="teacher.image" v-bind:title="teacher.intro"/>
          </span>

        <div class="space-4"></div>

        <div class="width-85 label label-info label-xlg arrowed-in arrowed-in-right">
          <div class="inline position-relative">
            <a href="javascript:;" class="user-title-label dropdown-toggle" data-toggle="dropdown">
              <i class="ace-icon fa fa-circle light-green"></i>
              &nbsp;
              <span class="white">{{teacher.position}}</span>
            </a>
          </div>
        </div>
      </div>

      <div class="space-6"></div>

      <div class="text-center">
        <a href="javascript:;" class="text-info bigger-110" v-bind:title="teacher.motto">
          <i class="ace-icon fa fa-user"></i>
          {{teacher.name}}【{{teacher.nickname}}】
        </a>
      </div>

      <div class="space-6"></div>

      <div class="profile-social-links align-center">
        <button v-on:click="edit(teacher)" class="btn btn-xs btn-info">
          <i class="ace-icon fa fa-pencil bigger-120"></i>
        </button>
        &nbsp;
        <button v-on:click="del(teacher.id)" class="btn btn-xs btn-danger">
          <i class="ace-icon fa fa-trash-o bigger-120"></i>
        </button>
      </div>

      <div class="hr hr16 dotted"></div>

    </div>
  </div>
  <!-- 弹窗 -->
  <div id="form-modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">表单</h4>
        </div>
        <div class="modal-body">
          <form class="form-horizontal">
            <div class="form-group">
              <label class="col-sm-2 control-label">名称</label>
              <div class="col-sm-10">
                <input v-model="teacher.name" type="text" class="form-control">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">昵称</label>
              <div class="col-sm-10">
                <input v-model="teacher.nickname" type="text" class="form-control">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">头像</label>
              <div class="col-sm-10">
                <File v-bind:suffixs="['jpg','jpeg','png']"
                    v-bind:inputId="'image-upload'"
                    v-bind:text="'上传头像'"
                    v-bind:after-upload="afterUpload"
                    v-bind:use="'T'"></File>
                <div v-show="teacher.image" class="row">
                  <div class="col-md-4"><img v-bind:src="teacher.image" class="img-responsive"/></div>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">职位</label>
              <div class="col-sm-10">
                <input v-model="teacher.position" type="text" class="form-control">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">座右铭</label>
              <div class="col-sm-10">
                <input v-model="teacher.motto" type="text" class="form-control">
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-2 control-label">简介</label>
              <div class="col-sm-10">
                <textarea v-model="teacher.intro" class="form-control" rows="5"></textarea>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" @click="save">保存</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
</template>

<script>
import Pagination from "@/components/pagination";
import File from "@/components/file";

export default {
  components: {Pagination,File},
  name: "teacher",
  data() {
    return {
      teacher: {},
      teachers: [],
    }
  },
  props: {
    'activeSidebar': {
      type: Function
    }
  },
  mounted() {
    let _this = this;
    // this.activeSidebar("business-teacher-sidebar")
    _this.list(1);
  },
  methods: {
    list(page) {
      Loading.show();
      let _this = this;
      _this.$post(process.env.VUE_APP_SERVER + "/business/admin/teacher/list", {
        page: page,
        size: _this.$refs.pagination.size
      }).then(res => {
        Loading.hide();
        console.log(res);
        let content = res.content;
        _this.teachers = content.list;
        _this.$refs.pagination.render(page, content.total);
      }).catch(res => {
        console.log(res);
      });
    },
    add() {
      let _this = this;
      $("#form-modal").modal('show');
    },
    save() {
      let _this = this;
      // 保存校验
      if (1 != 1
          || !Validator.require(_this.teacher.name, "名称")
          || !Validator.length(_this.teacher.name, "名称", 1, 50)
          || !Validator.length(_this.teacher.nickname, "昵称", 1, 50)
          || !Validator.length(_this.teacher.image, "头像", 1, 100)
          || !Validator.length(_this.teacher.position, "职位", 1, 50)
          || !Validator.length(_this.teacher.motto, "座右铭", 1, 50)
          || !Validator.length(_this.teacher.intro, "简介", 1, 500)
      ) {
        return;
      }

      Loading.show();
      _this.$post(process.env.VUE_APP_SERVER + "/business/admin/teacher/save", _this.teacher).then(res => {
        Loading.hide();
        console.log(res);
        if (res.success) {
          $("#form-modal").modal('hide');
          _this.list(1);
          Toast.success('保存成功！');
        } else {
          $("#form-modal").modal('hide');
          _this.list(1);
          Toast.success(res.message);
        }
      }).catch(res => {
        console.log(res);
      });
    },
    del(id) {
      let _this = this;
      Confirm.show("删除讲师后不可恢复!", function () {
        Loading.show();
        _this.$get(process.env.VUE_APP_SERVER + "/business/admin/teacher/del/" + id).then(res => {
          Loading.hide();
          console.log(res);
          if (res.success) {
            Toast.success('删除成功！');
            _this.list(1);
          } else {
            Toast.success('删除失败！');
            _this.list(1);
          }
        }).catch(res => {
          console.log(res);
          Toast.error('删除失败！')
        });
      })
    },
    edit(teacher) {
      let _this = this;
      _this.teacher = $.extend({}, teacher);
      $("#form-modal").modal('show');
    },
    afterUpload(res) {
      let _this = this;
      _this.teacher.image = res.content.path;
    }
  }
}
</script>

<style scoped>

</style>